{% load myfilter %}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/cms/index.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>大学生心理健康评估：后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h3>大学生心理健康评估：后台管理</h3>
        <div>
            <h3>Admin</h3>
            <el-button @click="logout" size="mini">退出</el-button>
        </div>
    </header>
    <main class="main">
        <el-menu default-active="1" class="sidebar" @select="navto">
            <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;页</span>
            </el-menu-item>
            <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">心理咨询</span>
            </el-menu-item>
        </el-menu>
        <section class="content">
            <div class="overview">
                <div>
                    <i class="el-icon-user-solid"></i>
                    <div>
                        <span>注册人数：</span>
                        <span>{{ register_count }} 人</span>
                    </div>
                </div>
                <div>
                    <i class="el-icon-s-promotion"></i>
                    <div>
                        <span>请求次数： </span>
                        <span>{{ visit_count }} 次</span>
                    </div>
                </div>
                <div>
                    <i class="el-icon-s-order"></i>
                    <div>
                        <span>测试次数： </span>
                        <span>{{ test_count }} 次</span>
                    </div>
                </div>
                <div>
                    <i class="el-icon-s-comment"></i>
                    <div>
                        <span>咨询次数： </span>
                        <span>{{ advisory_count }} 例</span>
                    </div>
                </div>
            </div>
            <div class="chart" id="chart"></div>
        </section>
    </main>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            {#可视化配置#}
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['注册人数', '请求次数', '测试次数', '咨询次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: {{ date|safe }}
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '注册人数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#5ea5fc'
                        },
                        lineStyle: {
                            color: '#409EFF'
                        },
                        itemStyle: {
                            normal: {
                                color: '#409EFF'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ register|safe }}
                    },
                    {
                        name: '请求次数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#80d459'
                        },
                        lineStyle: {
                            color: '#67C23A'
                        },
                        itemStyle: {
                            normal: {
                                color: '#67C23A'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ visit|safe }}
                    },
                    {
                        name: '测试次数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#f68989'
                        },
                        lineStyle: {
                            color: '#F56C6C'
                        },
                        itemStyle: {
                            normal: {
                                color: '#F56C6C'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ test|safe }}
                    },
                    {
                        name: '咨询次数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: '#efbe74'
                        },
                        lineStyle: {
                            color: '#E6A23C'
                        },
                        itemStyle: {
                            normal: {
                                color: '#E6A23C'
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: {{ advisory|safe }}
                    },
                ]
            },
        },
        mounted: function () {
            {#初始话折线图#}
            this.myChart = echarts.init(document.getElementById('chart'));
            {#显示折线图#}
            this.myChart.setOption(this.option)
        },
        methods: {
            {#退出登录#}
            logout() {
                Cookies.remove('secret_key');
                window.location.href = '/cms'
            },
            {#跳转页面#}
            navto(index) {
                switch (index) {
                    case '1':
                        window.location.href = '/cms/index';
                        break;
                    case '2':
                        window.location.href = '/cms/user';
                        break;
                    case '3':
                        window.location.href = '/cms/advisory';
                        break;
                    default:
                        break
                }
            }
        }
    });
</script>
</body>
</html>
